<template>
  <div class='task-container'>
    <el-form ref="formRef" :model="form" :rules="rules" class="from-content" label-width="100">
      <el-row>
        <el-col :span="24">
          <el-form-item label="材质" prop="noticeTitle">
            <el-radio-group v-model="form.material">
              <el-radio v-for="item in materialList" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.material">
          <el-form-item label="材质价格">
            <el-input-number v-model="form.materialPrice" :step="0.01" :max="100" :min="0.01" />
            <span style="margin-left: 10px;">元</span>
            <strong v-if="priceDes">{{ `注意：${priceDes}` }}</strong>

          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="克重" prop="gsm">
            <el-input-number v-model="form.gsm" :step="10" :max="400" :min="100" />
            <span style="margin-left: 10px;">克</span>
            <strong v-if="gsmDes">{{ `注意：${gsmDes}` }}</strong>

          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="数量" prop="num">
            <el-input-number v-model="form.num" :step="100" :max="1000000" :min="1" />
            <span style="margin-left: 10px;">PCS</span>
          </el-form-item>
        </el-col>


        <el-col :span="24">
          <el-form-item label="材料尺寸" prop="materialWidth">
            <el-input-number v-model="form.materialWidth" :step="0.1" />
            <span style="margin:0 10px;"> -- </span>
            <el-input-number v-model="form.materialLength" :step="0.1" />
            <span style="margin-left: 10px;">CM</span>
          </el-form-item>
        </el-col>



        <el-col :span="6">
          <el-form-item label="是否含税">
            <el-switch v-model="form.isTaxation" />
          </el-form-item>
        </el-col>

        <el-col :span="18" v-if="form.isTaxation">
          <el-form-item label="税价">
            <el-input-number v-model="form.taxationPrice" :step="0.01" :max="1" :min="0.01" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="印刷方式">
            <el-radio-group v-model="form.printing">
              <el-radio v-for="item in printingList" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        
        <el-col :span="24" v-if="form.printing === 4">
          <el-form-item label="是否双面">
            <el-switch v-model="form.isDouble" />
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.printing">
          <el-form-item label="印刷价格">
            <el-input-number v-model="form.printingPrice" :step="0.01" :max="1" :min="0" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="是否锁边">
            <el-switch v-model="form.isSeams" />
          </el-form-item>
        </el-col>

        <el-col :span="16" v-if="form.isSeams">
          <el-form-item label="锁边价格">
            <el-input-number v-model="form.seamsPrice" :step="0.01" :max="1" :min="0.01" />
          </el-form-item>
        </el-col>


        <el-col :span="24">
          <el-form-item label="是否包装">
            <el-switch v-model="form.isWrap" />
          </el-form-item>
        </el-col>
        <template v-if="form.isWrap">

          <el-col :span="16">
            <el-form-item label="包装方式">
              <el-radio-group v-model="form.wrap">
                <el-radio v-for="item in wrapList" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包装价格">
              <el-input-number v-model="form.wrapPrice" :step="0.01" :max="10" :min="0.01" />
            </el-form-item>
          </el-col>
        </template>

      </el-row>
      <h2>
        单价：{{ pcsPrice }}
      </h2>
      <h2>
        话术：{{ sayText }}
        <el-button type="primary" @click="handleCopy">复制</el-button>
      </h2>
      <hr>
      <div style="text-align: right">
        <el-button type="primary">确定</el-button>
        <el-button type="danger">复位</el-button>
      </div>

    </el-form>
  </div>
</template>

<script lang='ts' setup>
import { ElMessage } from 'element-plus';
import { computed, ref,watch, watchEffect } from 'vue';
const priceDes = ref('');
const gsmDes = ref('');
const form = ref({
	material: 0,  // 材质
	materialPrice: 0,  // 材质价格
	gsm: 200,  // 克重
	isTaxation: false,// 是否含税
	taxationPrice: 0.07,// 税率
	materialLength: 10,// 材料长度
	materialWidth: 10,// 材料宽度
	num: 1,// 数量
	printing: 0,// 印刷方式
	isDouble:false,// 数码印是否双面
	printingPrice: 0,// 印刷价格
	isSeams: false,// 是否锁边
	seamsPrice: 0.03,// 锁边价格
	isWrap: false,// 是否包装
	wrap: 0, // 包装方式
	wrapPrice: 0.03,// 包装价格
});
const materialList = [
	{
		label: '针一',
		value: 1,
		defaultPrice: 0.08,
		defaultGSM: 200,
		desPrice:'价格: 0.065 ~ 0.08',
		desGSM:'克重: 180 ~ 300g(常规: 200g 220g)'
	},
	{
		label: '针二',
		value: 2,
		defaultPrice: 0.05,
		defaultGSM: 180,
		desPrice:'价格: 0.04 ~ 0.05',
		desGSM:'克重: 160 ~ 280(常规: 180g 220g)'
	},
	{
		label: '麂皮绒',
		value: 3,
		defaultPrice: 0.08,
		defaultGSM: 220,
		desPrice:'价格: 0.06 ~ 0.08',
		desGSM:'克重: 170 ~ 300 (常规: 180g 200g 220g)'
	},
	{
		label: '双面绒',
		value: 4,
		defaultPrice: 0.08,
		defaultGSM: 200,
		desPrice:'价格: 0.06 ~ 0.08',
		desGSM:'克重: 180 ~ 300g (常规: 200g)'
	},
	{
		label: '法兰绒',
		value: 5,
		defaultPrice: 0.08,
		defaultGSM: 250,
		desPrice:'价格: 0.06 ~ 0.08',
		desGSM:'克重: 250'
	},
	{
		label: '植绒布',
		value: 6,
		defaultPrice: 0.07,
		defaultGSM: 180,
		desPrice:'价格: 0.07',
		desGSM:'克重: 180'
	},
	{
		label: '皮质',
		value: 7,
		defaultPrice: 0.07,
		defaultGSM: 200,
		desPrice:'价格: 0.065 ~ 0.08',
		desGSM:'克重: 200'
	},
	{
		label: '其他',
		value: 8,
		defaultPrice: 0.07,
		defaultGSM: 0.07,
		desPrice:'价格:自定义',
		desGSM:'价格:0.065 ~ 0.08'
	}];

const printingList = [
	{
		label: '无印刷',
		value: 1,
		defaultPrice: 0
	},
	{
		label: '丝印',
		value: 2,
		defaultPrice: 0.08
	},
	{
		label: '压印',
		value: 3,
		defaultPrice: 0.08
	},
	{
		label: '数码印',
		value: 4,
		defaultPrice: 0.1
	},
	{
		label: '刺绣',
		value: 5,
		defaultPrice: 0.5
	},
	{
		label: '烫金/银',
		value: 6,
		defaultPrice: 0.1
	},
	{
		label: '其他',
		value: 7,
		defaultPrice: 0.1
	},
];

const wrapList = [
	{
		label: 'OPP',
		value: 1,
		defaultPrice: 0.1
	},
	{
		label: 'PVC',
		value: 2,
		defaultPrice: 0.15
	},
	{
		label: '皮质',
		value: 3,
		defaultPrice: 0.1
	},
	{
		label: '其他',
		value: 4,
		defaultPrice: 0.1
	},
];

const pcsPrice = computed(() => {
	let price = 0;
	// 单片面积 * 克重 * 单片价格
	price = area.value * form.value.gsm * form.value.materialPrice * form.value.num;
	// 是否含税
	if (form.value.isTaxation) {
		price = price * (1 + form.value.taxationPrice);
	}
	// 是否双面
	if (form.value.isDouble) {
		price += form.value.printingPrice;
	}
	// 是否锁边
	if (form.value.isSeams) {
		price += form.value.seamsPrice;
	}
	// 是否锁边
	if (form.value.isSeams) {
		price = price + (area.value * form.value.seamsPrice);
	}
	
	return price.toFixed(2);
});

// 说的话
const sayText = computed(() => {
	let text = '';
	if (form.value.material) {
		text += '材料：';
	}
	if (form.value.gsm) {
		text += '克重：' + form.value.gsm + '；';
	}
	if (form.value.isTaxation) {
		text += '是否含税：' + form.value.isTaxation + '；';
	}
	return text;
});

// 面积
const area = computed(() => {
	let res = 0;
	if (form.value.materialLength && form.value.materialWidth) {
		res = (form.value.materialLength * 0.01) * (form.value.materialWidth * 0.01);
	}
	return res;
});

// 周长
const perimeter = computed(() => {
	let res = 0;
	if (form.value.materialLength && form.value.materialWidth) {
		res = (( form.value.materialLength * 0.01) + (form.value.materialWidth * 0.01)) * 2;
	}
	return res;
});



const rules = ref({
	material: [
		{
			required: true,
			message: '公告标题不能为空',
			trigger: 'blur',
		},
	],
	noticeType: [
		{
			required: true,
			message: '公告类型不能为空',
			trigger: 'change',
		},
	],
});

// 监控材质
watch(()=>form.value.material,(newVal)=>{
	const filterMaterial = materialList.filter(ele=>ele.value === newVal);
	// 设置默认价格和克重
	if(filterMaterial.length>0){
		form.value.materialPrice = filterMaterial[0].defaultPrice;
		form.value.gsm = filterMaterial[0].defaultGSM;
		priceDes.value = filterMaterial[0].desPrice;
		gsmDes.value = filterMaterial[0].desGSM;
	}
});

// 监控印刷
watch([()=>form.value.printing,()=>form.value.isDouble],(newVal)=>{
	const filterPrinting = printingList.filter(ele=>ele.value === newVal[0]);
	// 设置默认价格和克重
	if(filterPrinting.length>0){
		form.value.printingPrice = filterPrinting[0].defaultPrice;
	}
	// 如果是数码印刷
	if(newVal[0] === 4){
		form.value.printingPrice = area.value * 10;
		if(newVal[1]){
			form.value.printingPrice *= 2;

		}
	}
});

// 监控锁边
watch([()=>form.value.isSeams,perimeter],(newVal)=>{
	if(newVal){
		form.value.seamsPrice = newVal[1] * 0.2;
	}else{
		form.value.seamsPrice = 0;
	}
});

// 监控包装
watch(()=>form.value.wrap,(newVal)=>{
	const filterWrap = wrapList.filter(ele=>ele.value === newVal);
	// 设置默认价格和克重
	if(filterWrap.length>0){
		form.value.wrapPrice = filterWrap[0].defaultPrice;
	}
});

const copyToClipboard = async (text: string) => {
	if (!navigator.clipboard) {
		const textArea = document.createElement('textarea');
		textArea.value = text;
		document.body.appendChild(textArea);
		textArea.focus();
		textArea.select();
		try {
			const successful = document.execCommand('copy');
			const msg = successful ? 'successful' : 'unsuccessful';
			ElMessage.success('复制成功');
		} catch (err) {
			ElMessage.error('复制失败');
		}
		document.body.removeChild(textArea);
		return;
	}
	try {
		await navigator.clipboard.writeText(text);
		ElMessage.success('复制成功');
	} catch (err) {
		ElMessage.error('复制失败');
	}
};

// 复制按钮点击事件
const handleCopy = () => {
	copyToClipboard(sayText.value);
};
</script>
<style scoped lang='scss'>
.from-content {
  width: 800px;
  margin-left: 100px;
  margin-top: 100px;
  border: 2px solid #000;
  border-radius: 20px;
  padding: 20px;
}
</style>